/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';


/* 第一个示例程序 */
export default class BViewDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.first_text}>第一个</Text>
        <Text style={styles.second_text}>第二个</Text>
        <Text style={styles.third_text}>第三个</Text>
        <Text style={styles.forth_text}>第四个</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    top: 20,
    height: 100,
    backgroundColor: 'red',

    // 改变主轴的方向
    flexDirection: 'row',
    // 主轴的对齐方式
    justifyContent: 'space-between',
    // 侧轴的对齐方式
    alignItems: 'stretch',
  },
  first_text: {
    backgroundColor: 'green',
    // width: 40,
    height: 30,
  },
  second_text: {
    backgroundColor: 'blue',
    // width: 40,
    height: 40,
  },
  third_text: {
    backgroundColor: 'yellow',
    // width: 40,
    height: 50,
  },
  forth_text: {
    backgroundColor: 'pink',
    // width: 40,
    height: 60,
  },
});

export class BViewDemo1 extends Component {
  render() {
    return (
      <View style={styles1.container}>
        <Text style={{backgroundColor: 'yellow', width: 100}}>第一个</Text>
        <Text style={{backgroundColor: 'blue', width: 100}}>第二个</Text>
        <Text style={{backgroundColor: 'green', width: 100}}>第三个</Text>
        <Text style={{backgroundColor: 'pink', width: 100}}>第四个</Text>
      </View>
    );
  }
}

const styles1 = StyleSheet.create({
  container: {
    top: 20,
    // height: 100,
    backgroundColor: 'red',

    // 改变主轴的方向
    flexDirection: 'row',
    // 主轴的对齐方式
    justifyContent: 'flex-start',
    // 侧轴的对齐方式
    alignItems: 'flex-start',

    // 自动换行
    flexWrap: 'wrap',
  },
});

export class BViewDemo2 extends Component {
  render() {
    return (
      <View style={styles2.container}>
        <Text style={{backgroundColor: 'yellow', flex: 1}}>第一个</Text>
        <Text style={{backgroundColor: 'blue', flex: 2}}>第二个</Text>
        <Text style={{backgroundColor: 'green',}}>第三个</Text>
        <Text style={{backgroundColor: 'pink',}}>第四个</Text>
      </View>
    );
  }
}

const styles2 = StyleSheet.create({
  container: {
    top: 20,
    // height: 100,
    backgroundColor: 'red',

    // 改变主轴的方向
    flexDirection: 'row',
    // 主轴的对齐方式
    justifyContent: 'flex-start',
    // 侧轴的对齐方式
    alignItems: 'flex-start',
  },
});

AppRegistry.registerComponent('BViewDemo', () => BViewDemo2);
